<template>
  <el-form
    v-loading="genCommFormLoading"
    :model="genCommForm"
    size="small"
    label-width="85px">
    <el-row>
      <el-col :span="10">
        <el-form-item label="设备类别">
          <el-input :value="genCommForm.deviceType" placeholder="设备类别"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="命令类型">
          <el-input :value="genCommForm.genCommType" placeholder="命令类型"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="方法名">
          <el-input :value="genCommForm.methodName" placeholder="方法名"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="方法别名">
          <el-input :value="genCommForm.methodAlias" placeholder="方法别名"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="涉及协议">
      <EZTable
        v-loading="tableLoading"
        :table-id="tableId"
        :table-hdl="tableHdl"
        :fit-table="false"
        :rows="commandData"
        @pageChanged="getCommandDataWithGC"
        @sizeChanged="getCommandDataWithGC"
        @filterChange="getCommandDataWithGC">
      </EZTable>
    </el-form-item>
  </el-form>
</template>

<script>
  import {commonConfig} from "@/config/common";
  import {commonString, msgCode} from "@/config/string";
  import {tableIdConfig, tableOptBtnConfig} from '@/config/table';
  import {routerMeta} from "@/router/routerMeta";
  import {confirmHandle, deepCopyWithJson, messageHandle, windowOpenNewPage} from "@/utils";
  import {assembleTableOptBtn, getTableConfig, TableStateHdl} from "@/modules/routeParamStateHdl";
  import genCommCommTableCfg from "@/config/table/genCommCommand";
  import EZTable from '@/components/table/EZTable';

  export default {
    name: "GenCommCommand",
    components: {
      EZTable
    },
    props: {
      genCommForm: {
        type: Object,
        default: () => {
          return {
            genCommId: '',
            deviceType: '',
            genCommType: commonConfig.commandType[0].label,
            methodName: '',
            methodAlias: '',
            remarks: '',
          }
        }
      }
    },
    data() {
      return {
        genCommFormLoading: false,
        tableLoading: false,
        tableId: tableIdConfig.genCommCommand,
        tableHdl: null,
        commandData: []
      }
    },
    watch: {
      "genCommForm.genCommId": {
        handler() {
          this.getCommandDataWithGC();
        }
      }
    },
    created() {
      this.initTableConfig();
      this.getCommandDataWithGC();
    },
    methods: {
      initTableConfig() {
        if (this.tableHdl) return;
        const {columns = [], filters = []} = getTableConfig(this.tableId, genCommCommTableCfg);
        assembleTableOptBtn(columns, ({type = '', data = {}}) => {
          if (!type) return;
          const command = deepCopyWithJson(data);
          switch (type) {
            case tableOptBtnConfig.command.type:
              windowOpenNewPage(this, {
                name: routerMeta.commandEdit.name,
                params: {pid: command.protocol, cid: command._id}
              });
              break;
            case tableOptBtnConfig.delete.type:
              this.deleteDeviceCommand(command);
              break;
            default:
              break;
          }
        });
        this.tableHdl = new TableStateHdl('', this.tableId, columns, filters);
      },
      // 根据通用命令查询具体命令
      getCommandDataWithGC() {
        if (!this.genCommForm.genCommId) return;
        this.tableLoading = true;
        const selector = {generalCommand: this.genCommForm.genCommId};
        const tableParam = this.tableHdl.assembleTableParam();
        API.command.CommandInProtocol({...tableParam, selector}).then(result => {
          this.tableLoading = false;
          const {data = [], total = 0} = result;
          const assembleDeviceText = (src = []) => {
            const destArray = [];
            src.forEach(s => {
              destArray.push(`<span>${s.deviceName}</span>`);
            });
            return destArray.join('</br>');
          };
          this.commandData = data.map(command => {
            const {devices = {}} = command;
            return {
              ...command,
              deviceText: assembleDeviceText(devices)
            }
          });
          this.tableHdl.total = total;
        }).catch(err => {
          console.log('err', err)
          this.tableLoading = false;
        });
      },
      deleteDeviceCommand(command = {}) {
        confirmHandle({label: `确定要删除设备命令：【${command.commandName}】 吗?`}).then(() => {
          API.command.commandDelete({_id: command._id}).then(result => {
            messageHandle({code: msgCode.DELETE_SUCCESS, title: '设备命令'});
            this.tableHdl.judgeTableMatched();
            this.getCommandDataWithGC();
          });
        }).catch(() => {
        });
      },
    },
  }
</script>

<style scoped>

</style>
